<template>
  <div class="pandectdetail">
    <my-header></my-header>
    <div class="container">
      <div class="content">
        <div class="up">
          <div class="order">
            <h2>北京炮局工厂青年旅舍</h2>
            <div class="hotel">
              <div class="room">
                <p>房间</p>
                <h3><span>278</span>元起</h3>
              </div>
              <div class="bed">
                <p>床位</p>
                <h3><span>75</span>元起</h3>
              </div>
            </div>
            <button>立即预定</button>
            <div class="share">
              <span>分享到：</span>
              <a href=""></a>
              <a href=""></a>
              <a href=""></a>
              <a href=""></a>
              <a href=""></a>
            </div>
          </div>
          <div class="swiper">
            <!-- <span class="demonstration">Click 指示器触发</span> -->
            <el-carousel trigger="click">
              <el-carousel-item v-for="item in 4" :key="item">
                <!-- <h3 class="small">{{ item }}</h3> -->
                <img
                  src="http://111.230.248.218:1500/fileUpload/104799/16008457382791600845738279_0.jpg"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="middle">
          <ul>
            <li @click="now = 0" :class="{ active: now == 0 }">
              <b></b>
              旅舍概况
            </li>
            <li @click="now = 1" :class="{ active: now == 1 }">
              <b></b>
              房型及价格
            </li>
            <li @click="now = 2" :class="{ active: now == 2 }">
              <b></b>
              地图
            </li>
            <li @click="now = 3" :class="{ active: now == 3 }">
              <b></b>
              设施与服务
            </li>
            <li @click="now = 4" :class="{ active: now == 4 }">
              <b></b>
              图片
            </li>
            <li @click="now = 5" :class="{ active: now == 5 }">
              <b></b>
              最新动态
            </li>
            <li @click="now = 6" :class="{ active: now == 6 }">
              <b></b>
              评论
            </li>
          </ul>
        </div>
        <div class="down">
          <div class="gk" v-show="now == 0">
            <div class="detail">
              <div class="img">
                <img
                  src="http://111.230.248.218:1500/fileUpload/104799/15416506926471541650692647_0.jpg"
                  alt=""
                />
              </div>
              <div class="text">
                <h2>北京炮局工厂青年旅舍</h2>
                <p>
                  北京炮局工厂青年旅舍坐落于著名的雍和宫景点后方,步行大约5分钟即可到达.旅舍交通十分便利,有多条公交车辆以及地铁.炮局工厂是北京第一家具有＼"loft＼"风格的国际青年旅舍,在这里你可以自由的放松身心.
                </p>
                <p>
                  P.LOFT
                  紧贴着雍和宫,胡同里都是寻常百姓人家.这里以前曾是监狱,军火库,工厂.现在,是一家真正的青年旅舍,没有奢华的装修,尽可能多的保留了旧工厂的原貌.
                </p>
                <p>
                  我们提供干净的床单,舒适的床,价格低廉且美味绝伦的食物,更为您提供了超大的公共空间和亲近自然的户外空间,我们希望您不要呆在房间里,而是与全球的青年朋友沟通分享旅行的快乐.中国青年旅舍已经开始变化,更多的青年旅舍看起来更像商务酒店.你知道的,住宾馆和生活在北京,是截然不同的,期待你的到来.LIVE
                  IN P.LOFT. LIVE IN BEIJING.
                </p>
              </div>
              <div class="right">
                <div>
                  <h2>营业时间</h2>
                  <p>前台 :10:00 到 18:00</p>
                  <p>入住时间:10:00后</p>
                  <p>房间保留到 18:00前</p>
                </div>
                <div>
                  <h2>设施与服务</h2>
                  <p>
                    花园 |电视 |无线网络 |咖啡厅/小餐厅 |空调 |自助洗衣
                    |阅读室/阅览角 |行李房 |冬季暖气 |餐厅 |旅游/旅游服务台
                    |便利店 |附近有停车场 |
                  </p>
                  <a href="">查看更多设施</a>
                </div>
                <div>
                  <h2>联系我们</h2>
                  <p>北京炮局工厂青年旅舍<a href="">联系方式</a></p>
                  <p>
                    地址：北京市东城区炮局头条29号（雍和宫站地铁2号线B出口）<a
                      href=""
                      >查看地图</a
                    >
                  </p>
                  <p>邮编：100007</p>
                </div>
              </div>
            </div>
          </div>
          <div class="fx" v-show="now == 1">
            <h2>房型及价格</h2>
            <div class="date">
              <div class="block">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="入住日期"
                >
                </el-date-picker>
              </div>
              <div class="block">
                <el-date-picker
                  v-model="value2"
                  align="right"
                  type="date"
                  placeholder="退房日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
              <el-button type="warning">查询</el-button>
            </div>
            <div class="order">
              <table>
                <thead>
                  <tr>
                    <td style="width: 270px">房型</td>
                    <td style="width: 70px">最多人数</td>
                    <td style="width: 150px">1晚的房价(元)</td>
                    <td style="width: 180px">数量预定</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td rowspan="2">
                      <img
                        src="http://111.230.248.218:1500/fileUpload/104799/fjimg_1_100316145328.JPG"
                        alt=""
                      />
                      <p>六人间(女生间)床位 - 床位</p>
                    </td>
                    <td>
                      <i class="el-icon-user-solid"></i>
                    </td>
                    <td>
                      <span>共75 会员价</span><br />部分预付 | 不可退款 |
                      2021会员
                    </td>
                    <td>
                      <select>
                        <option v-for="n in 10" :key="n">{{ n }}</option>
                      </select>
                      <p>入住人数:</p>
                      男:<select>
                        <option>0</option>
                        <option>1</option>
                      </select>
                      女:<select>
                        <option>0</option>
                        <option>1</option>
                      </select>
                      <br>
                      12岁以下孩童:<select style="margin-top:10px">
                        <option>0</option>
                        <option>1</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <i class="el-icon-user-solid"></i>
                    </td>
                    <td>
                      <span>共84 非会员价 </span><br />部分预付 | 不可退款 |
                      2021非会员
                    </td>
                    <td>
                      <select>
                        <option v-for="n in 10" :key="n">{{ n }}</option>
                      </select>
                      <p>入住人数:</p>
                      男:<select>
                        <option>0</option>
                        <option>1</option>
                      </select>
                      女:<select>
                        <option>0</option>
                        <option>1</option>
                      </select>
                      <br />
                      12岁以下孩童:<select style="margin-top:10px">
                        <option>0</option>
                        <option>1</option>
                      </select>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="select">
                <p>您选择的旅舍</p>
                <p>北京炮局工厂青年旅舍</p>
                <p>2022-11-21 到 2022-11-22 共1晚</p>
                <p>请选择房间数量以继续</p>
                <p>您选择的房型</p>
                <table>
                  <thead>
                    <tr>
                      <td>房型</td>
                      <td>数量</td>
                      <td>单价x晚</td>
                      <td>小计</td>
                      <td></td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>六人间(女生间)<br><span>会员价</span></td>
                      <td>1</td>
                      <td>75x1</td>
                      <td>75</td>
                      <td><a href="">删除详情</a></td>
                    </tr>
                  </tbody>
                </table>
                <button>继续</button>
              </div>
            </div>
            <h2>预定须知</h2>
            <p>
              1.一般标准房（3床）单价以房间计算，多人房（≥3床）单价以床位计算。
            </p>
            <p>
              2.一般标准房中的“预订数量”是指房间数，各种多人房中的“预订数量”是指床位数，请小心选择预订数量。
            </p>
            <p>
              3.当入住时间少于预订时间（
              如预订3天，实际只住2天或1天），多付的定金不退，也不可抵余额。
            </p>
            <p>
              4."对于客人额外的预订要求旅舍将根据实际情况尽量满足,但并不构成订单上所必需履行的条款
              " 。当客人入住当天以未满足要求为由而拒绝入住（
              如预订2个床位，实际只入住1位或未入住），多付的定金不退，也不可抵余额。
            </p>
            <p>
              5.如果入住人数（大于12岁的人数）大于房间可容纳人数，旅舍保留要求客人加床或者多预订一间房的权利。
              出于安全考虑，旅舍有权拒绝携带12岁以下小孩入住多人间同一床位的客人。
            </p>
            <p>
              6.“会员价”指的是持有国际青年旅舍®会员卡的会员所享受的优惠价格。无国际青年旅舍®会员卡的客人请选择“非会员价”。
            </p>
            <p>
              7.会员及非会员均可预订房间，请如实选择“会员”的预订数量以及“非会员”的预订数量，旅舍会在各位旅客入住时核对每一位会员的会员卡，如果与订单的数量不符，旅舍会视实际情况补收金额的差价部分。
            </p>
            <p>
              8.旅舍房间在不同时段有不同价格，例如周末或黄金周，不同地方的活动、庆典期间等，如果预订入住的时间跨越不同时段，在上一步中显示的价格是平均价，在本页显示分时段的明细价格表。
            </p>
            <p>
              9.青年旅舍®中多人间原则上是分男女宿舍，但如属同一团体对房间安排有特殊要求的，请在预订后联系旅舍协调。
            </p>
            <p>
              10.青年旅舍®主要为了青年人旅行交流而开办的，其设施也主要是考虑年青人的特点而设置的，服务中也有许多需要自助的内容，故较适合中青年入住。青年旅舍®有权出于安全考虑对不适合入住特定房型(如多人间上下床)的客人进行劝导和另行安排。
            </p>
            <p>
              11.客人入住旅舍当天，在办理入住手续之前，每家旅舍为客人保留预订床位或房间的有效时限会有不同，请注意旅舍说明。如果您在最晚到店时间前无法赶到的，请提前通知预订的旅舍，以免房间被取消。
            </p>
            <p>
              12.按国际惯例，入住旅舍一天的计算时间为当天14：00以后，离店时间为次日正午12：00前
              。如果提前入住或推迟离店，均须酌情加收一定的费用。
            </p>
          </div>
          <div class="map" v-show="now == 2">
            <div id="container" style="width: 620px; height: 405px"></div>
            <div>
              <div class="email">
                <h3>联系我们</h3>
                <p>
                  地址:北京市东城区炮局头条29号(雍和宫站地铁2号线B出口)<a
                    href=""
                    >查看地图</a
                  ><br />Email: plofthostel@126.com<br />邮编:100007
                </p>
              </div>
              <div class="route">
                <p>
                  机场:<br />
                  自首都机场乘坐机场巴士二号线至雍和宫桥东下车穿过街天桥到雍和大厦停车场尽头穿过铁门继续向南进入炮局头条胡同直行100米即是
                </p>
                <p>
                  火车站:<br />
                  北京站乘地铁２号线至雍和宫站B口出，直行向东 至雍和大厦
                  右转向南进入停车场走至尽头后
                  穿过铁门继续向南进入炮局头条胡同直行100米即是
                  北京西站乘特２路公交车至雍和宫桥东
                  或者乘坐地铁9号到国家图书馆转4号线到西直门转2号线到雍和宫下车B口出，直行向东
                  至雍和大厦 右转向南进入停车场走至尽头后
                  穿过铁门继续向南进入炮局头条胡同直行100米即是
                </p>
                <p>
                  汽车站:<br />
                  电车：18路、44路内环、44路外环、13路、特2路、62路、116路、11７路、606路、800路内环
                  、800路外环、807路、820路内环、820路外环、820路外环延长线、858路、909路、206路夜班车雍和宫或雍和宫东下车步行致
                </p>
                <p>
                  地铁:<br />
                  地铁２号线及地铁５号线雍和宫站B出口出站后 直行向东 至雍和大厦
                  右转向南进入停车场走至尽头后
                  穿过铁门继续向南进入炮局头条胡同直行100米即是
                </p>
              </div>
            </div>
          </div>
          <div class="fw" v-show="now == 3">
            <h2>设施与服务</h2>
            <div>
              <h3>休闲与健身</h3>
              <ul>
                <li><span>•</span>花园</li>
              </ul>
            </div>
            <div>
              <h3>网络设施</h3>
              <ul>
                <li><span>•</span>无线网络</li>
              </ul>
            </div>
            <div>
              <h3>餐饮</h3>
              <ul>
                <li><span>•</span>咖啡厅/小餐厅</li>
              </ul>
            </div>
            <div>
              <h3>景点、旅游设施</h3>
              <ul>
                <li><span>•</span>餐厅</li>
              </ul>
            </div>
          </div>
          <div class="tp" v-show="now == 4">
            <h2>旅舍图片</h2>
            <template>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in 4" :key="item">
                  <img
                    src="http://111.230.248.218:1500/fileUpload/104799/16274656751471627465675147_0.jpg"
                    alt=""
                  />
                </el-carousel-item>
              </el-carousel>
            </template>
          </div>
          <div class="dt" v-show="now == 5">
            <div>
              <el-badge :value="0" class="item">活动</el-badge>
              <el-badge :value="0" class="item">动态</el-badge>
            </div>
          </div>
          <div class="pl" v-show="now == 6">
            <div class="detail">
              <h2>评论</h2>
              <div>
                <i>!</i>
                <p>此旅舍暂无点评，<br />分享入住体验，成为首位点评者。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
import AMapLoader from "@amap/amap-jsapi-loader"

export default {
  data() {
    return {
      now: 1,
      map: null,
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            },
          },
        ],
      },
      value1: "",
      value2: "",
    }
  },
  mounted() {
    // 加载地图
    window._AMapSecurityConfig = {
      securityJsCode: "7c2b9addc3e9f8dcd31f415b516775e3",
    }
    AMapLoader.load({
      key: "	f65252837d8546f9a347ac01552babe9", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        this.map = new AMap.Map("container", {
          // viewMode:"3D",
          zoom: 11,
          center: [116.426963, 39.953635],
        })
        var marker = new AMap.Marker({
          position: new AMap.LngLat(116.426963, 39.953635),
          offset: new AMap.Pixel(-10, -10),
          icon: "http://www.yhachina.com/images/position-icon.png", // 添加 Icon 图标 URL
          title: "青年旅社",
        })
        this.map.add(marker)
        // 信息窗体的内容
        var content = []

        // 创建 infoWindow 实例
        var infoWindow = new AMap.InfoWindow({
          content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
        })

        // 打开信息窗体
        infoWindow.open(this.map)
      })
      .catch(e => {
        console.log(e)
      })
  },
  components: { MyHeader, MyFooter },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 20px;
  background-color: #f5f5f5;
}
.container .content {
  width: 1080px;
  margin: 0 auto;
  padding: 20px 0;
}
.container .content .up {
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.container .content .up .order {
  width: 360px;
  height: 422px;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}
.container .content .up .order h2 {
  font-size: 30px;
}
.container .content .up .order .hotel {
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
}
.container .content .up .order .hotel .room {
  border-right: 1px solid #e1e1e1;
  padding-right: 30px;
}
.container .content .up .order .hotel p {
  font-size: 20px;
}
.container .content .up .order .hotel h3 {
  color: #f7941c;
  font-size: 20px;
  margin-top: 10px;
}
.container .content .up .order .hotel span {
  font-weight: bold;
  font-size: 40px;
}
.container .content .up .order button {
  width: 300px;
  height: 50px;
  margin-top: 50px;
  background-color: #f7941c;
  border-radius: 50px;
  border: 1px solid transparent;
  margin-bottom: 50px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.container .content .up .order .share {
  margin-left: -100px;
}
.container .content .up .order .share a {
  width: 25px;
  height: 24px;
  display: inline-block;
  background: url(http://bdimg.share.baidu.com/static/api/img/share/icons_1_24.png?v=7314c5f6.png)
    no-repeat center;
  margin-right: 5px;
}
.container .content .up .order .share a:nth-child(2) {
  background-position: 0 0;
}
.container .content .up .order .share a:nth-child(3) {
  background-position: 0 -1612px;
}
.container .content .up .order .share a:nth-child(4) {
  background-position: 0 -2652px;
}
.container .content .up .order .share a:nth-child(5) {
  background-position: 0 -52px;
}
.container .content .up .order .share a:nth-child(6) {
  background-position: 0 -104px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.container .content .up .swiper {
  width: 715px;
  height: 450px;
}
.container .content .up .swiper .el-carousel {
  height: 450px;
}

::v-deep .container .content .up .swiper .el-carousel .el-carousel__container {
  height: 450px !important;
}
.container .content .middle {
  margin-top: 20px;
}
.container .content .middle ul {
  // display: flex;
  // justify-content: space-between;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
}
.container .content .middle li {
  width: 152px;
  height: 130px;
  line-height: 180px;
  display: inline-block;
  text-align: center;
  border-right: 1px solid #e1e1e1;
  position: relative;
}
.container .content .middle li.active {
  background-color: #f7b51c;
  color: #fff;
}
.container .content .middle li b {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 50px;
  margin: 3px;
  background: url(http://www.yhachina.com/css/app_z.png) no-repeat center;
}
.container .content .middle li:nth-child(7) {
  border: none;
  // width: 158px;
}
.container .content .middle li:nth-child(7) b {
  background-position: -100px -372px;
}
.container .content .middle li:nth-child(6) b {
  background-position: -150px -372px;
}
.container .content .middle li:nth-child(5) b {
  background-position: -199px -372px;
}
.container .content .middle li:nth-child(4) b {
  background-position: -249px -372px;
}
.container .content .middle li:nth-child(3) b {
  background-position: -299px -372px;
}
.container .content .middle li:nth-child(2) b {
  background-position: -349px -372px;
}
.container .content .middle li:nth-child(1) b {
  background-position: -426px 0;
}
.container .content .down {
  margin-top: 20px;
  padding: 30px 20px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
}
.container .content .down .gk .detail {
  display: flex;
  justify-content: space-between;
}
.container .content .down .gk .detail img {
  width: 205px;
  display: inline-block;
}
.container .content .down .gk .detail .text {
  width: 405px;
  font-family: 微软雅黑;
}
.container .content .down .gk .detail .text h2 {
  font-size: 18px;
  color: #333;
}
.container .content .down .gk .detail .text p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
  line-height: 20px;
}
.container .content .down .gk .detail .right {
  width: 390px;
}
.container .content .down .gk .detail .right div {
  background-color: #f1f8ed;
  margin-bottom: 20px;
  padding: 20px;
}
.container .content .down .gk .detail .right div h2 {
  line-height: 35px;
  font-size: 18px;
  color: #333;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e6dc;
}
.container .content .down .gk .detail .right div p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 25px;
}
.container .content .down .gk .detail .right div a {
  color: #4b8fcc;
  font-size: 12px;
  margin: 5px;
}

.container .content .down .pl .detail h2 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
  padding: 25px 0 5px;
}
.container .content .down .pl .detail div {
  width: 1080px;
  height: 360px;
  // line-height: 360px;
  text-align: center;
  padding: 80px 0;
}
.container .content .down .pl .detail div i {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 3px solid #4b8fcc;
  font-size: 50px;
  color: #4b8fcc;
  line-height: 78px;
  text-align: center;
  display: inline-block;
  // padding: 20px;
}
.container .content .down .pl .detail div p {
  font-size: 30px;
  color: #4b8fcc;
  margin: 20px 0;
}
.container .content .down .dt .item {
  margin-top: 10px;
  margin-right: 20px;
  padding: 5px;
  cursor: pointer;
}
.container .content .down .dt .item.active {
  border-bottom: 1px solid #f7941c;
}
.container .content .down .tp h2 {
  font-size: 18px;
  padding: 20px;
}
::v-deep .container .content .down .tp .el-carousel .el-carousel__container {
  height: 780px !important;
}
.container .content .down .fw h2 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e2e2e2;
  padding: 20px 0;
}
.container .content .down .fw div {
  width: 180px;
  height: 100px;
  padding: 30px;
  display: inline-block;
}
.container .content .down .fw div h3 {
  margin-bottom: 10px;
  font-weight: bold;
}

.container .content .down .fw li {
  margin: 5px;
}
.container .content .down .fw li span {
  color: #9acd54;
  margin-right: 5px;
}
.container .content .down .map {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20px;
}
.container .content .down .map div {
  width: 390px;
  margin-left: 20px;
}
.container .content .down .map div .email {
  height: 160px;
  background-color: #f1f8ed;
}
.container .content .down .map div .email h3 {
  font-size: 16px;
  padding: 10px;
  border-bottom: 1px solid #e2e2e2;
}
.container .content .down .map div .email a {
  color: #4b8fcc;
}
.container .content .down .map div .route {
  height: 600px;
  margin-top: 20px;
  background-color: #f1f8ed;
  padding-top: 5px;
}
.container .content .down .map div p {
  margin: 10px;
  font-size: 14px;
  line-height: 25px;
}
.container .content .down .fx h2 {
  padding: 10px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 20px;
}
.container .content .down .fx .date {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-color: #efefef;
  line-height: 80px;
  padding-left: 20px;
  border-radius: 5px;
}
.el-button {
  width: 200px;
  height: 50px;
  margin: 15px;
}
.container .content .down .fx .order {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.container .content .down .fx .order thead {
  width: 700px;
  background-color: #f1f8ed;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.container .content .down .fx .order thead td {
  border: 1px solid #fff;
}
.container .content .down .fx .order tbody td {
  border: 1px solid #e2e2e2;
  padding: 15px;
}
.container .content .down .fx .order tbody td p{
  margin-bottom: 10px;
}
.container .content .down .fx .order tbody {
  text-align: center;
  vertical-align: center;
}
.container .content .down .fx .order tr img {
  width: 120px;
}
.container .content .down .fx .order .select {
  width: 320px;
  background-color: #f1f8ed;
  padding: 10px;
}
.container .content .down .fx .order .select p:nth-child(1) {
  font-size: 14px;
  line-height: 20px;
  color: #666;
}
.container .content .down .fx .order .select p:nth-child(2) {
  font-size: 16px;
  line-height: 30px;
  margin-left: 10px;
}
.container .content .down .fx .order .select p:nth-child(3) {
  font-size: 14px;
  line-height: 30px;
  margin-left: 10px;
}
.container .content .down .fx .order .select p:nth-child(4) {
  font-size: 14px;
  line-height: 30px;
  margin-left: 10px;
}
.container .content .down .fx .order .select p:nth-child(5){
  padding-top: 20px;
}
.container .content .down .fx .order .select button {
  width: 100px;
  height: 50px;
  border-color: transparent;
  border-radius: 50px;
  color: #fff;
  background-color: #f7941c;
  float: right;
  margin: 20px 20px 0 0;
}
.container .content .down .fx .order .select table span{
  background-color: #f7941c;
  color: #efefef;
}
.container .content .down .fx td {
  vertical-align: middle;
  font-size: 14px;
  line-height: 20px;
}
.container .content .down .fx td select:nth-child(1) {
  border-radius: 10px;
  width: 60px;
  height: 20px;
  background-color: #87c524;
  border-color: transparent;
  color: #fff;
  padding-left: 5px;
  margin: 5px;
}
.container .content .down .fx td select:nth-child(1) option{
  background-color: #fff;
  color: #333;
}
.container .content .down .fx td select:nth-child(n+2){
  // background-color: #ccc;
  width: 40px;
  border-radius: 10px;
 margin-left: 10px;
}
.container .content .down .fx p {
  font-size: 14px;
  color: #333;
  line-height: 28px;
  font-family: 微软雅黑;
}
.container .content .down .fx span {
  color: #f7941c;
  border-bottom: 1px dashed #f7941c;
  margin-top: 2px;
}
</style>
